<template>
    <view>
        <!-- pages/setParkingimg/index.wxml -->

        <view class="img" v-if="img">
            <!-- <image src="{{img}}" /> -->
            <image mode="widthFix" :src="img" @tap="clickImg" style="width: 100%"></image>
        </view>
        <view class="" v-if="img" style="text-align: center; font-size: 29rpx">提示：点击图片放大查看</view>
        <view v-else>
            <view class="nopark">
                <image src="../../static/assets/img/empty.png"></image>
            </view>
            <view class="text">暂无停车示位图</view>
        </view>
    </view>
</template>

<script>
// pages/setParkingimg/index.js
import util from './../../utils/util.js';
import api from './../../utils/api.js';
export default {
    data() {
        return {
            img: '',
            touch: {
                distance: 0,
                scale: 1,
                baseWidth: null,
                baseHeight: null,
                scaleWidth: null,
                scaleHeight: null,
                diff: ''
            }
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        const value = options.img; // this.setData({img:value})

        util.request(api.getEncryPath + '?path=' + value, '', 'POST').then((res) => {
            this.setData({
                img: res
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage: function() {}
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */ methods: {
        //点击事件
        clickImg: function (e) {
            var imgUrl = this.img;
            uni.previewImage({
                urls: [imgUrl],
                //需要预览的图片http链接列表，注意是数组
                current: '',
                // 当前显示图片的http链接，默认是第一个
                success: function (res) {},
                fail: function (res) {},
                complete: function (res) {}
            });
        },

        touchStartHandle(e) {
            // 单手指缩放开始，也不做任何处理
            if (e.touches.length == 1) {
                console.log('单滑了');
                return;
            }

            console.log('双手指触发开始'); // 注意touchstartCallback 真正代码的开始
            // 一开始我并没有这个回调函数，会出现缩小的时候有瞬间被放大过程的bug
            // 当两根手指放上去的时候，就将distance 初始化。

            let xMove = e.touches[1].clientX - e.touches[0].clientX;
            let yMove = e.touches[1].clientY - e.touches[0].clientY;
            let distance = Math.sqrt(xMove * xMove + yMove * yMove);
            this.setData({
                'touch.distance': distance
            });
        },

        touchMoveHandle(e) {
            let touch = this.touch; // 单手指缩放我们不做任何操作

            if (e.touches.length == 1) {
                console.log('单滑了');
                return;
            }

            console.log('双手指运动开始');
            let xMove = e.touches[1].clientX - e.touches[0].clientX;
            let yMove = e.touches[1].clientY - e.touches[0].clientY; // 新的 ditance

            let distance = Math.sqrt(xMove * xMove + yMove * yMove);
            let distanceDiff = distance - touch.distance;
            let newScale = touch.scale + 0.005 * distanceDiff; // 为了防止缩放得太大，所以scale需要限制，同理最小值也是

            if (newScale >= 2) {
                newScale = 2;
            }

            if (newScale <= 0.6) {
                newScale = 0.6;
            }

            let scaleWidth = newScale * touch.baseWidth;
            let scaleHeight = newScale * touch.baseHeight; // 赋值 新的 => 旧的

            this.setData({
                'touch.distance': distance,
                'touch.scale': newScale,
                'touch.scaleWidth': scaleWidth,
                'touch.scaleHeight': scaleHeight,
                'touch.diff': distanceDiff
            });
        },

        load: function (e) {
            // bindload 这个api是<image>组件的api类似<img>的onload属性
            this.setData({
                'touch.baseWidth': e.detail.width,
                'touch.baseHeight': e.detail.height,
                'touch.scaleWidth': e.detail.width,
                'touch.scaleHeight': e.detail.height
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
